<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p271.css三角-直角三角形</title>
</head>

<style>
   * {
      padding: 0;
      margin: 0; 
      height: 1000px;
   }

   .box1 { 
       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;
       /* border: 20px solid pink; */
       border-top: 20px solid red ;
       border-right: 20px solid yellow ;
       border-bottom: 20px solid blue ;
       border-left: 20px solid pink ;

       margin: 100px auto;
   }

   .box2 {
       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;
       /* 直角三角形效果 */
       border-top: 50px solid red ;
       border-right: 20px solid transparent ;
       border-bottom: 0 solid transparent ;
       border-left: 0 solid transparent ;

       margin: 100px auto;
   }


   .box3 {
       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;
       border: 20px solid transparent;
       border-top-color: red ;

       margin: auto;
   }

   .mock {
       position: relative;
       height: 50px;
       width: 200px;
       background-color: pink;
       margin-top: 50px ;
   }
   .mock span {
       position: absolute;
       top: 0 ;
       right: 0 ;

       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;

       /* 上右下左 */
       border-color: transparent red transparent transparent ;
       border-style: solid;
       border-width: 50px 20px 0 0;

   }


   .mock02 {
       position: relative;
       height: 50px;
       width: 200px;
       background-color: red;
       margin-top: 50px ;
   }
   .mock02 span {
       position: absolute;
       top: 0 ;
       right: 0 ;

       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;

       /* 上右下左 */
       border-color: transparent white transparent transparent ;
       border-style: solid;
       border-width: 50px 20px 0 0;

   }

</style>
<body>
    <!-- 菜鸡内心os：做出来后，感觉自己又行了。。。 -->
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
    <div class="mock">
        <span></span>
    </div>


    <div class="mock02">
        <span></span>
    </div>

</body>
</html>